<template>
  <el-form
    ref="dataForm"
    :rules="formRules"
    :model="entity"
    label-suffix="："
    label-width="120px"
    style="text-align: left"
  >
    <el-form-item label="公钥" prop="publicKey">
      <el-input
        v-model="entity.publicKey"
        type="textarea"
        autosize
        placeholder="请输入公钥"
      />
    </el-form-item>
    <el-form-item label="私钥" prop="privateKey">
      <el-input
        v-model="entity.privateKey"
        type="textarea"
        autosize
        placeholder="请输入私钥"
      />
    </el-form-item>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="timestamp" prop="timestamp">
          <el-input v-model="entity.timestamp" placeholder="请输入时间戳" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="nonce" prop="nonce">
          <el-input v-model="entity.nonce" placeholder="请输入随机数" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col v-for="(p, index) in params" :key="index" :span="12">
        <el-form-item>
          <div style="display: flex">
            <el-input v-model="p.key" />：
            <el-input v-model="p.value" />
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="params.splice(index, 1)"
            />
          </div>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="rawData">{{ signResult.rawData }}</el-form-item>
    <el-form-item label="rawDataMD5">{{ signResult.rawDataMD5 }}</el-form-item>
    <el-form-item label="sign">
      <el-input v-model="signResult.sign" type="textarea" autosize />
    </el-form-item>
    <el-form-item label="验签结果">{{ verifySignResult }}</el-form-item>

    <div style="text-align: center">
      <el-button
        type="success"
        icon="el-icon-plus"
        @click="
          params.push({
            key: '',
            value: '',
          })
        "
        >添加参数</el-button
      >

      <el-button type="primary" @click="generateKeysHandler">
        生成公私钥
      </el-button>

      <el-button type="primary" @click="generateNonceAndTimestampHandler">
        生成随机数和时间戳
      </el-button>

      <el-button type="primary" @click="signHandler"> 生成签名 </el-button>

      <el-button type="primary" @click="verifySignHandler">
        验证签名
      </el-button>
    </div>
  </el-form>
</template>
<script>
import {
  keys,
  nonceAndTimestamp,
  sign,
  verifySign,
} from '@/api/tool/encryption'

export default {
  name: 'RSASign',
  data() {
    return {
      entity: {
        publicKey: null,
        privateKey: null,
        timestamp: null,
        nonce: null,
      },
      params: [],
      formRules: {},
      signResult: {
        rawData: null,
        rawDataMD5: null,
        sign: null,
      },
      verifySignResult: null,
    }
  },
  methods: {
    generateKeysHandler() {
      keys().then((res) => {
        let data = res.data.data
        this.entity.privateKey = data.privateKey
        this.entity.publicKey = data.publicKey
      })
    },
    generateNonceAndTimestampHandler() {
      nonceAndTimestamp().then((res) => {
        let data = res.data.data
        this.entity.timestamp = data.timestamp
        this.entity.nonce = data.nonce
      })
    },
    signHandler() {
      if (!this.entity.privateKey) {
        this.$message.warning('请输入私钥')
        return
      }

      let params = {}
      if (this.entity.timestamp != null && this.entity.timestamp != '') {
        params.timestamp = this.entity.timestamp
      }
      if (this.entity.nonce != null && this.entity.nonce != '') {
        params.nonce = this.entity.nonce
      }

      for (let i in this.params) {
        let param = this.params[i]
        params[param.key] = param.value
      }

      sign(params, this.entity.privateKey).then((res) => {
        let data = res.data.data
        this.signResult = data
      })
    },
    verifySignHandler() {
      if (!this.entity.privateKey) {
        this.$message.warning('请输入私钥')
        return
      }

      if (!this.signResult.sign) {
        this.$message.warning('请生成签名')
        return
      }

      let params = {
        timestamp: this.entity.timestamp,
        nonce: this.entity.nonce,
        sign: this.signResult.sign,
      }
      for (let i in this.params) {
        let param = this.params[i]
        params[param.key] = param.value
      }

      verifySign(params, this.entity.publicKey).then((res) => {
        let data = res.data.data
        this.verifySignResult = data
      })
    },
  },
}
</script>
